import React, { Component, Fragment } from 'react';
import {
  Icon,
  Modal,
  Checkbox,
  Input,
  Tabs,
  Select,
} from 'antd';
const TabPane = Tabs.TabPane;
const Option = Select.Option;

import styles from './index.module.less';

export default class NotOn extends Component {
  state={
    active: true,
    visible: false,
    list: [
      {
        title: '三级螺纹钢',
        num: '货号',
        price: '1000.00',
        updateTime: '2018-08-10 18:13:10',
        handleOne: '上架',
        handleTwo: '编辑',
      },
    ],
  };
  callback(key) {
    console.log(key);
  }
  handleChange(value) {
    console.log(`selected ${value}`);
  }
  onChange(e) {
    console.log(`checked = ${e.target.checked}`);
  }
  showModal = () => {
    this.setState({
      visible: true,
    });
  };
  handleOk = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };
  handleCancel = e => {
    console.log(e);
    this.setState({
      visible: false,
    });
  };
  render() {
    const { list, visible } = this.state;
    return (
      <div className={styles.Market}>
        <div className={styles.content}>
          <div className={styles.condition + ' ' + styles.clearfix}>
            <div className={styles.pullLeft + ' ' + styles.checkBox}>
              <Checkbox onChange={this.onChange.bind(this)}>全选</Checkbox>
            </div>
            <div className={styles.pullLeft + ' ' + styles.soldOut}>
              <span>下架</span>
            </div>
            <div className={styles.pullLeft + ' ' + styles.select}>
              <Select defaultValue="自定义分类" style={{ width: 150, height: 22 }} onChange={this.handleChange.bind(this)}>
                <Option value="jack">Jack</Option>
                <Option value="lucy">Lucy</Option>
                <Option value="Yiminghe">yiminghe</Option>
              </Select>
            </div>
            <div className={styles.pullLeft + ' ' + styles.input}>
              <Input placeholder="商品标题/货号"/>
            </div>
            <div className={styles.pullLeft + ' ' + styles.screen}>
              <span>筛选</span>
            </div>
            <div className={styles.pullLeft + ' ' + styles.clear}>
              <span>清空筛选</span>
            </div>
          </div>
          <div className={styles.list}>
            <div className={styles.title + ' ' + styles.clearfix}>
              <div className={styles.pullLeft + ' ' + styles.titleOne}>
                <span>标题</span>
              </div>
              <div className={styles.pullLeft + ' ' + styles.num}>
                <span>货号</span>
              </div>
              <div className={styles.pullLeft + ' ' + styles.price}>
                <div className={styles.priceOne + ' ' + styles.pullLeft}>
                  <span>价格</span>
                </div>
                <div className={styles.priceTwo + ' ' + styles.pullLeft}>
                  <div>
                    <Icon type="up" />
                  </div>
                  <div>
                    <Icon type="down" />
                  </div>
                </div>
              </div>
              <div className={styles.pullLeft + ' ' + styles.time}>
                <div className={styles.priceOne + ' ' + styles.pullLeft}>
                  <span>更新时间</span>
                </div>
                <div className={styles.priceTwo + ' ' + styles.pullLeft}>
                  <div>
                    <Icon type="up" className={styles.icon}/>
                  </div>
                  <div>
                    <Icon type="down" />
                  </div>
                </div>
              </div>
              <div className={styles.pullLeft + ' ' + styles.handle}>
                <span>操作</span>
              </div>
            </div>
            <div>
              <React.Fragment>
                {
                  list.map(item => {
                    return (
                      <div key={ item.num } className={styles.listOne + ' ' + styles.clearfix}>
                        <div className={styles.pullLeft + ' ' + styles.titleOne}>
                          <span>{ item.title }</span>
                        </div>
                        <div className={styles.pullLeft + ' ' + styles.num}>
                          <span>{ item.num }</span>
                        </div>
                        <div className={styles.pullLeft + ' ' + styles.price}>
                          <span>{ item.price }</span>
                        </div>
                        <div className={styles.pullLeft + ' ' + styles.time}>
                          <span>{ item.updateTime }</span>
                        </div>
                        <div className={styles.pullLeft + ' ' + styles.handle}>
                          <span onClick={this.showModal}>{ item.handleOne }</span>
                          <Modal
                            title="商品上架"
                            visible={this.state.visible}
                            okText="确定"
                            cancelText="取消"
                            onOk={ this.handleOk }
                            onCancel={ this.handleCancel }
                          >
                            <p>确定将商品上架</p>
                          </Modal>
                          <span>{ item.handleTwo }</span>
                        </div>
                      </div>
                    );
                  })
                }
              </React.Fragment>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
